import { DEFAULT_PRIMARY } from "@/config";
import { getDarkColor, getLightColor } from "@/utils/color";

/**
 * @description 全局主题 hooks
 * */
export const useTheme = () => {
  // 修改主题颜色
  const changePrimary = (val: string = DEFAULT_PRIMARY) => {
    // 计算主题颜色变化
    document.documentElement.style.setProperty("--el-color-primary", val);
    document.documentElement.style.setProperty(
      "--el-color-primary-dark-2",
      false ? `${getLightColor(val, 0.2)}` : `${getDarkColor(val, 0.3)}`
    );
    for (let i = 1; i <= 9; i++) {
      const primaryColor = false
        ? `${getDarkColor(val, i / 10)}`
        : `${getLightColor(val, i / 10)}`;
      document.documentElement.style.setProperty(
        `--el-color-primary-light-${i}`,
        primaryColor
      );
    }
  };

  return {
    changePrimary,
  };
};
